<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" mode=""></image>
			
			<comDetailNavigateBack title="VIP特权" />

			<!--
				'calc(100vh - ' + commonNavHeight + ' - 120rpx)'
				页面整体高度 - 导航栏高度 - 顶部tababr切换栏高度 - 底部显示“没有更多了”文本高度
			  -->
			<scroll-view :style="{'height': 'calc(100vh - ' + commonNavHeight + ' - 26rpx)'}" class="vip-page">
				<view class="vip-top">
					<comBgView :src="`${commonConfigs.domainFrontFileLink}/files/images/vip/top-bg.png`">
						<view class="vip-top-box relative">

							<view class="vip_box flex">
								<view class="top-left relative flex-all-center flex-direction-column">
									<image class="img bg"
										v-if="commonConfigs && commonConfigs.domainFrontFileLink"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/medal-light.png`"
										mode="heightFix" style="height: 118rpx;left: 38rpx;top: 14rpx;"></image>
										
									<image class="img relative"
										:src="vipList && vipList[levelIndex] ? vipList[levelIndex].vip_medal_cover : ''"
										mode="heightFix" style="height: 98rpx;flex: 0 0 auto;"></image>
										
									<view class="item-box-desc relative" style="top: -32rpx;width: 100%;text-align: center;" v-if="vipList && vipList.length">
										<view class="relative desc-txt-view font-hanserif-bold" style="z-index: 2;">
											{{ vipList[levelIndex].vip_name }}
										</view>
									</view>
								</view>
								
								<view class="top-right relative">
									<view class="top-time relative flex flex-align-items-center flex-justify-content-center">
										<image class="bg"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/time-bg.png`" mode="">
										</image>
										<text class="relative">倒计时：{{count_down}}天</text>
									</view>
								
									<view class="top-right-text">等级：
										<text class="text" v-if="levelIndex+1>=vipList.length">
											{{vipList[levelIndex].vip_name || ''}}
										</text>
										<text class="text" v-else-if="levelIndex==0">
											VIP0→{{vipList[levelIndex+1].vip_name}}
										</text>
										<text class="text" v-else>
											{{vipList[levelIndex].vip_name}}→{{vipList[levelIndex+1].vip_name}}
										</text>
									</view>
								</view>
							</view>
							<view class="top-right-bar relative flex flex-align-items-center flex-justify-content-center">
								<view class="progress-box absolute">
									<view class="progress-bar"
										:style="{width: numCalculation(barNum, barNumAll) * 100 + '%'}">
									</view>
								</view>
								<view class="top-right-num relative">{{barNum}} / {{barNumAll}} 积分</view>
							</view>
						</view>
					</comBgView>
				</view>

				<view class="vip-center relative" :style="{'height': 'calc(100vh - ' + commonNavHeight + ' - 26rpx - 206rpx - 31rpx - 30rpx)','overflow': 'hidden',}">
					<image class="bg absolute" style="width: 750rpx;height: 196rpx;background-size: 100% 100%;left: 0rpx;"
						:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/vip-lever-bg.png`" mode="">
					</image>
					<comBgView >
						<!-- :src="`${commonConfigs.domainFrontFileLink}/files/images/vip/vip-lever-bg.png`" style="width: 100%;height: 100%;" -->
						
						<view class="vip-box" :style="{'height': 'calc(100vh - ' + commonNavHeight + ' - 26rpx - 206rpx - 31rpx - 214rpx - 30rpx)','overflow': 'hidden',}">
							<scroll-view class="vip-box-left" scroll-y="true" :scroll-top="scrollTop">
								<view class="level-btn relative"
									:class="[level >= item.vip_level ? 'active' : '', `level-btn${index}`]"
									:style="{
										'filter': level >= item.vip_level ? 'unset' : 'grayscale(90%)',
									}"
									v-for="(item,index) in vipList" :key="index" @click="choose(index)">

									<image class="bg btn-bg" style="top: 28rpx;width: 100%;height: 170rpx;" v-if="handleLevel===index"
										:src='`${commonConfigs.domainFrontFileLink}/files/images/vip/level-active.png`'
										mode=""></image>

									<image class="bg btn-bg" :src="item.vip_medal_cover" mode=""></image>

									<view class="item-box-desc relative" style="top: 52rpx;">
										<view class="relative desc-txt-view font-hanserif-bold" style="z-index: 2;">{{ item.vip_name }}</view>
										<view class="item-box-desc-border absolute font-hanserif-bold" style="z-index: 1;">{{ item.vip_name }}</view>
									</view>
								</view>
							</scroll-view>
							<view class="vip-box-right">
								<view class="vip-box-right-top relative">
									<view class="title relative flex-all-center">
										<image class="bg" mode="heightFix"
											style="margin: 0 auto;left: 0;top: 0;right: 0;bottom: 0;"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/title-bg.png`">
										</image>
										<view class="text relative font-hanserif-bold">
											{{vipList[handleLevel].vip_name}}特权
										</view>
									</view>

									<view class="vip-box-content relative" :style="{
										background: `url(${commonConfigs.domainFrontFileLink}/files/images/vip/vip-text-bg.png) 0 0 no-repeat`,
										backgroundSize: '100% 100%',
									}">
										<view class="content relative" v-html="vipList[handleLevel].desc"></view>
										<image class="tips relative"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/vip-tips.png`"
											mode=""></image>
										<view class="list relative">
											<view class="list-item" v-if="vipList[handleLevel].currency_num"
												@click="toTips('旺卡币')">
												<view class="list-item-img relative">
													<image class="bg"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/vip-bg.png`"
														mode=""></image>
													<image class="img relative" style="width: 84rpx;height: 84rpx;"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/icon-currency.png`"
														mode=""></image>
												</view>
												<view class="list-item-text">x{{vipList[handleLevel].currency_num}}</view>
											</view>
											<view class="list-item" @click="toTips('头像框')"
												v-if="vipList[handleLevel].vip_cover">
												<view class="list-item-img relative">
													<image class="bg"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/vip-bg.png`"
														mode=""></image>
													<image class="relative" mode="heightFix"
														style="width: auto; height: 90rpx;"
														:src="vipList[handleLevel].vip_cover"></image>
												</view>
												<view class="list-item-text" style="font-size: 20rpx;">头像框</view>
											</view>
										</view>
										<view class="relative btn"
											:style="{opacity: vipList[handleLevel].is_open== 1 ? 1 : 0.4}"
											@click="vipList[handleLevel].is_open==1 ? toReceive() : ''">
											<image class="bg"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/vip-btn.png`">
											</image>
										</view>
									</view>
								</view>
							</view>

						</view>

						<view class="vip-box-right-bottom relative" style="bottom: 23rpx;">
							<view class="bottom-content relative">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/day-reward-bg.png`" mode="">
								</image>
								<view class="relative flex flex-align-items-center flex-justify-content-between" style="height: 100%;">

									<view class="bottom-content-left flex flex-justify-content-between flex-direction-column">
										<view class="bottom-title">每日领取</view>
										<view class="content">当前VIP等级，可领取{{vipList[levelIndex].day_currency_num}}旺卡币
										</view>
										<view class="content-tips">请于当天24:00前领取，否则将视为放弃</view>
									</view>

									<view class="bottom-content-right flex relative btn flex-justify-content-between flex-align-items-center " v-if="vipList[levelIndex].day_currency_num">
										<view class="btn-left flex">
											<image class="img" :src="`${commonConfigs.domainFrontFileLink}/files/images/vip/ico-box.png`" mode=""></image>
										</view>
										<view class="btn-right relative" @click="is_open_vip_reward_today == 1 ? rewardToday() : ''">
											<image class="bg"
												:style="{opacity: is_open_vip_reward_today == 1 ? 1 : 0.4}"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/btn-receive.png`" mode=""></image>
										</view>
									</view>

								</view>
							</view>
						</view>

					</comBgView>
				</view>

				<!-- 遮罩层：gif特效 -->
				<view class="mask" v-if="showBoxMask" :zoom="true">
					<view class="warp">
						<view @click="showBoxMask = false" class="box-text font-hanserif-bold relative"
							style="width: 646rpx;height: 625rpx;margin-top: -200rpx;">
							<image class="box-light bg" 
								style="width: 646rpx;height: 625rpx;"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/light.png`" mode="">
							</image>
							
							<image
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/newerbornZone/new-person-close.png`"
								class="absolute" style="width: 42rpx;height: 42rpx;top: 100rpx;right: 30rpx;" mode=""></image>
							
							<image
								class="absolute"
								style="width: 646rpx;height: 625rpx;"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/box-animate.png`"
								mode="">
							</image>

							<image class="box-ico relative" style="width: 173rpx;height: 130rpx;"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/vip/coupon-box-ico.png`" mode="">
							</image>

							<view class="relative box-text-icon" style="top: 250rpx;">
								<text class="box-text-left">旺卡币x </text>
								<text class="box-text-right"> {{ vipList[levelIndex].day_currency_num }}</text>
							</view>
						</view>

					</view>
				</view>

			</scroll-view>
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store'

	import {
		ACTIONS
	} from '@/store/modules/userStore'

	import {
		getVipHomeApi,
		getVipLevelDoneApi,
		getDayVipRewardDoneApi
	} from '@/setupproject/INTERFACE'

	export default {
		name: 'vipPage',
		data() {
			return {
				showBoxMask: false, // 宝箱遮罩层：每日领取
				scrollTop: 0,
				count_down: 0,
				level: '',
				levelIndex: 0,
				barNum: 0,
				handleLevel: 0, //点击时的等级
				vipList: [{}],
				barNumAll: 0,
				is_open_vip_reward_today: 0, //每日领取
			}
		},
		computed: {
			commonNavHeight() {
				return this.$store.getters.commonNavHeight + 'px';
			},
			userInfo() {
				return this.$store.getters.userInfo
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
		},
		async onLoad() {
			await this.$store.dispatch(ACTIONS.USER_INFO_GET_FUN);

			this.level = Number(this.userInfo.vip_level);

			await this.getVipHomeApi()
			this.scrollTop = 40 * this.level;
		},
		methods: {
			
			choose(index) {
				this.handleLevel = index;
			},
			
			async rewardToday() {
				const {
					code,
					msg,
					data,
				} = await getDayVipRewardDoneApi();
			
				// 领取成功
				if (code === 200) {
					this.is_open_vip_reward_today = 0;
					this.showBoxMask = true;
					return;
				};
			
				uni.showToast({
					icon: code === 200 ? 'success' : 'none',
					title: data || msg,
				})
			},
			
			numCalculation(nums, sums) {
				let res = 0;
				if (sums == 0) {
					res = 1;
				} else {
					res = nums / sums > 1 ? 1 : nums / sums;
				}
				return res;
			},
			
			toTips(text) {
				uni.showToast({
					icon: "none",
					title: text,
				})
			},
			
			async getVipHomeApi() {
				const {
					code,
					msg,
					data,
				} = await getVipHomeApi();

				if (code !== 200) {
					return uni.showToast({
						icon: "none",
						title: msg,
					})
				}
				// this.vipList = data.vip_config_list.filter(item =>{ return item.vip_level>0 });
				this.vipList = data.vip_config_list;
				this.barNum = Number(data.recharge_money);
				this.is_open_vip_reward_today = data.is_open_vip_reward_today;
				this.count_down = data.count_down;
				this.vipList.map((item, index) => {
					item.vip_name = item.vip_name.toUpperCase();
					if (Number(item.vip_level) <= Number(this.level)) {
						this.handleLevel = index;
						this.levelIndex = index;
						// this.barNumAll = Number(item.recharge_condition);
					}
				})
				let index = this.levelIndex;
				if (index >= this.vipList.length - 1) {
					index = this.vipList.length - 2;
				}
				this.barNumAll = Number(this.vipList[index + 1].recharge_condition);

				// 显示等级列表最大为当前等级加10
				this.vipList = this.vipList.slice(0, this.level + 10);
			},
			
			async toReceive() {
				const {
					code,
					msg,
					data,
				} = await getVipLevelDoneApi({
					vip_level: this.vipList[this.handleLevel].vip_level
				});
			
				// 领取成功
				if (code === 200) this.vipList[this.handleLevel].is_open = 0;
			
				uni.showToast({
					icon: code === 200 ? 'success' : 'none',
					title: data || msg,
				})
			},
			
			
		},
	}
</script>

<style lang="scss" scoped>
	.vip-page {
		.vip-top {
			width: 686rpx;
			height: 284rpx;
			margin: 23rpx auto 0;

			.vip-top-box {
				// display: flex;
				height: 284rpx;
				padding: 0 20rpx 0 10rpx;
				.vip_box {
					align-items: center;
					padding-top: 60rpx;
				}
				
				.top-left {
					width: 240rpx;
					height: 118rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-style: italic;
					font-size: 32rpx;

					.img {
						width: 100%;
						height: 100%;
						margin-bottom: 10rpx;
					}
					
					.desc-txt-view {
						// color: #FFFFFF;
						background: linear-gradient(0deg, #FFCA4A 0%, #FFFCCD 78.8330078125%, #FFFFFF 96.6064453125%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					
					.item-box-desc-border {
						top: 0;
						// -webkit-text-stroke: 2rpx #B291F4;
						// text-stroke: 2rpx #B291F4;
					}
				}

				.top-right {
					// width: 488rpx;
					flex: 1;
					// border: 1px solid red;
					margin-left: 12rpx;

					.top-time {
						width: 180rpx;
						height: 48rpx;
						// right: 10rpx;
						// top: 10rpx;
						color: #7F24FF;
						font-size: 24rpx;
					}

					.top-right-text {
						font-size: 32rpx;
						color: #FFFFFF;
						margin: 18rpx 0;

						.text {
							font-weight: bold;
							font-size: 50rpx;
							background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}

					
				}
				.top-right-bar {
					margin: auto;
					margin-top: 4rpx;
					width: 558rpx;
					height: 16rpx;
					border-radius: 9rpx;
					overflow: hidden;
				
					.progress-box {
						width: 558rpx;
						height: 16rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						// margin-top: 8rpx;
				
						.progress-bar {
							background: #63FFF7;
							border-radius: 8rpx;
							height: 16rpx;
						}
					}
				
				
					.bar-box {
						// width: 426rpx;
				
						width: calc(100% - 62rpx);
				
						height: 15rpx;
						top: 10rpx;
						left: 0;
						right: 0;
						margin: auto;
					}
				
					.bar {
						border-radius: 0rpx 0 0 15rpx;
					}
				
					.top-right-num {
						margin-left: 16rpx;
						font-size: 18rpx;
						color: #FF0000;
					}
				}
			}
		}

		.vip-center {
			width: 750rpx;
			margin: 20rpx auto 0;
			display: flex;

			.vip-box {
				width: 100%;
				display: flex;
				// height: calc(100vh - 217rpx - 40rpx);
				padding: 0 10rpx;
				.vip-box-left {
					position: relative;
					top: 3%;
					width: 180rpx;
					height: 90%;
					// overflow-y: auto;
					flex-shrink: 0;
					.level-btn {
						width: 167rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFF;
						font-size: 28rpx;
						padding-top: 32rpx;
						margin-bottom: 60rpx;
						font-weight: bold;
						font-style: italic;
						margin-top: 26rpx;
						.desc-txt-view {
							// color: #FFFFFF;
							background: linear-gradient(0deg, #FFCA4A 0%, #FFFCCD 78.8330078125%, #FFFFFF 96.6064453125%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
						
						.item-box-desc-border {
							top: 0;
							// -webkit-text-stroke: 2rpx #B291F4;
							// text-stroke: 2rpx #B291F4;
						}

						.btn-bg {
							left: 0;
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
							width: 148rpx;
							height: 124rpx;
						}
					}
				}

				.vip-box-right {
					position: relative;
					top: 2%;
					// width: 470rpx;
					height: 92%;

					// border: 1px solid red;

					.vip-box-right-top {
						// height: calc(100% - 330rpx);
						height: 100%;
					}

					.title {
						// top: -23rpx;
						left: 0;
						right: 0;
						margin: auto;
						margin-top: 16rpx;
						margin-bottom: 24rpx;
						width: 100%;
						height: 72rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.text {
							padding: 8rpx 10rpx 0rpx;
							font-style: italic;
							font-weight: bold;
							font-size: 40rpx;
							color: #001762;
							height: 100%;
							
						}
					}

					.vip-box-content {
						// height: calc(100% - 12rpx);
						height: calc(100% - 70rpx - 24rpx);
						overflow-y: auto;
						padding: 46rpx 30rpx;
						font-size: 28rpx;
						color: #fff;
						text-align: justify;

						.content {
							padding: 10rpx 20rpx;
							color: #FFFFFF;
						}

						.tips {
							margin: 47rpx auto 18rpx;
							width: 192rpx;
							height: 48rpx;
						}

						.list {
							display: flex;
							flex-wrap: wrap;
							padding: 0rpx 20rpx;

							.list-item {
								width: 100rpx;
								margin-right: 20rpx;
								margin-bottom: 15rpx;

								&:nth-child(3n+3) {
									margin-right: 0;
								}

								.list-item-img {
									height: 100rpx;
									// border-radius: 10rpx;
									box-sizing: border-box;
									// padding: 2rpx;
									overflow: hidden;
									// background: linear-gradient(-65deg, #FA7DD2, #7790ED);
									display: flex;
									align-items: center;
									justify-content: center;

									.img {
										width: 100rpx;
										height: 100rpx;
									}
								}

								.list-item-text {
									text-align: center;
								}
							}
						}

						.btn {
							margin: 36rpx auto 0;
							width: 328rpx;
							height: 76rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.text {
								letter-spacing: 4rpx;
								font-weight: bold;
								font-size: 34rpx;
								// color: #DF3122;
							}
						}
					}
				}
			}

			.vip-box-right-bottom {
				display: flex;
				width: 100%;
				height: 142rpx;

				.bottom-title {
					height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
					font-style: italic;
					color: #FFFFFF;
				}

				.bottom-content {
					width: 100%;
					margin: 0 23rpx 23rpx;
					// min-height: 230rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 16rpx 24rpx;
					font-size: 24rpx;
					color: #DDE0E3;
					text-align: justify;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.bottom-content-left {
						width: 64%;
						height: 100%;
					}

					.bottom-content-right {
						height: 100%;
						left: -20rpx;
						flex: 1;
						.btn-left {
							.img {
								width: 128rpx;
								height: 128rpx;
							}
						}

						.btn-right {
							width: 104rpx;
							height: 44rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.content-tips {
						margin-top: 5rpx;
						font-size: 22rpx;
						color: #FF0000;
					}
				}
			}


		}
	}


	// 弹框蒙版
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.80);

		// 弹框蒙版 内容区域
		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			// flex-direction: column;
			height: 100%;
			position: relative;
			z-index: 10;

			// border: 1px solid red;

			.box-text {
				color: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// animation: openBoxSize 1s both 1.6s 1;
				// -webkit-animation: openBoxSize 1s both 1.6s 1;
				// visibility: hidden;
				
				width: 646rpx;
				height: 625rpx;

				.box-text-icon {
					color: #E15B27;
					.box-text-left {
						font-size: 38rpx;
						margin-right: 12rpx;
					}

					.box-text-right {
						font-size: 52rpx;
					}
				}

				// 光影背景动画
				@keyframes openBoxSize {
					0% {
						// visibility: visible;
						transform: scale(0);
					}

					100% {
						// visibility: visible;
						transform: scale(1);
					}
				}
			}

			// 光影背景动画
			@keyframes openBoxLight {
				0% {
					transform: rotate(0)
				}

				100% {
					transform: rotate(360deg)
				}
			}

			// 扭蛋 上半部分 移动动画
			@keyframes ballTopTran {
				0% {
					transform: translateY(0)
				}

				100% {
					transform: translateY(-50rpx)
				}
			}

			// 扭蛋 下半部分 移动动画
			@keyframes ballBottomTran {
				0% {
					transform: translateY(0)
				}

				100% {
					transform: translateY(50rpx)
				}
			}

			// 扭蛋摇摆抖动动画
			@keyframes ballSwing {
				0% {
					transform: rotate(0deg);
					transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
				}

				10% {
					transform: rotate(-12deg);
					transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
				}

				20% {
					transform: rotate(12deg);
					transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
				}

				28% {
					transform: rotate(-10deg);
					transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
				}

				36% {
					transform: rotate(10deg);
					transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
				}

				42% {
					transform: rotate(-8deg);
					transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
				}

				48% {
					transform: rotate(8deg);
					transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
				}

				52% {
					transform: rotate(-4deg);
					transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
				}

				56% {
					transform: rotate(4deg);
					transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
				}

				60% {
					transform: rotate(0deg);
					transition-timing-function: cubic-bezier(0.755, .5, .855, .06)
				}

				100% {
					transform: rotate(0deg);
					transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
				}
			}
		}

	}
</style>